<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
	<!-- <mate name="flexibel" content="initial-drl=2"/> -->
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-touch-fullscreen" content="yes">
	<meta name="format-detection" content="telephone=no">
	<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
	<title>直播间解答预约</title>
	<!--[if lt IE 9]>  
        <script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script>  
    <![endif]-->
	<link rel="stylesheet" href="__PUBLIC__/css/YD_calendar.min.css" />

	<script type="text/javascript" src="__PUBLIC__/js/rem.js"></script>
	<script type="text/javascript" src="__PUBLIC__/js/axios.js"></script>
	<script src="__PUBLIC__/js/YD_calendar.min.js"></script>
	<script type="text/javascript" src="__PUBLIC__/js/jquery.min.js"></script>
	<script type="text/javascript" src="__PUBLIC__/js/layer/layer.js"></script>
	<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
	<style>
		html,
		body {
			height: 100%;
		}

		body {
			margin: 0;
		}

		main {
			min-height: 100%;
			background: url('__PUBLIC__/images/other/img_bj.png') no-repeat center center;
			background-size: 100% 100%;

			max-width: 7.5rem;
			margin: 0 auto;
		}

		ul {
			width: 7.10rem;
			height: 3.85rem;
			background-color: #f5efdf;
			border-radius: .20rem;
			margin: 0 auto;
			padding: 0 .3rem;
			box-sizing: border-box;
		}

		li {
			list-style: none;
			display: flex;
			height: .93rem;
			align-items: center;
			padding: 0;
			justify-content: space-between;

		}

		li .li-tlt {
			font-weight: 600;
			width: 1.4rem;
			flex: none;
			margin-right: 0.2rem;
			text-align-last: justify;
			font-size: .32rem;
			color: #403a2c;
		}

		li . {
			display: flex;
			align-items: center;
		}

		li .sexslt {
			display: flex;
			align-items: center;
			margin-right: .2rem;
		}

		li .sexslt i {
			display: block;
			margin-right: 0.2rem;
			width: .2rem;
			height: .2rem;
			border-radius: 50%;
			background-clip: content-box;
			padding: .02rem;
			border: 1px solid #aaa;
		}

		li .sexslt strong {
			font-weight: 500;
		}

		li .sexslt.on i {
			border: 1px solid #f00;
			background-color: #f00;
		}

		input {
			background-color: transparent;
			border: none;
			outline: none;
			font-size: .28rem;
		}

		input.username {
			flex: auto;
			width: 2rem;
		}

		input#phone,
		input.username {
			height: 100%;
		}
		input{
			padding-left: 0 !important;
		}

		.sex-wrap {
			display: flex;
			flex: none;
			font-size: .28rem;
		}

		#datetime {
			font-size: .28rem;
			color: #757575;
			padding-left: .2rem;
		}

		img.rili,
		img.locat {
			display: block;
			width: .28rem;
			height: auto;
		}

		.locat-wrap,
		.birth-wrap,
		#phone {
			flex: auto;
			height: 100%;
			display: flex;
			align-items: center;
		}
		.picker .picker-panel .picker-choose .picker-title {
			margin: 0;
		}

		.picker .picker-panel .wheel-wrapper .wheel .wheel-scroll {
			background-color: #fff;
			font-size: .3rem;
		}


		.banner {
			display: block;
			width: 7.5rem;
			height: 2.8rem;
			background: url('__PUBLIC__/images/other/bannerbg.png') no-repeat center center;
			background-size: 100% 100%;
			display: flex;
		}

		img.banner-dashi {
			height: 2.8rem;
			display: block;
			width: 2.2rem;
			/* background-color: rgba(255,255,255,.5); */
			flex: none;
			margin-right: 0.1rem;

		}

		.dashi .name {
			display: flex;
			align-items: flex-end;
			color: #fe3434;
			font-size: .28rem;
			height: 1rem;
			padding-bottom: .2rem;
			box-sizing: border-box;
		}

		.dashi .name .name-tt {
			font-size: .34rem;
			margin-right: 0.1rem;
			font-weight: 700;
		}

		.dashi .info {
			color: #333;
			line-height: .4rem;
			font-size: .28rem;
			padding-right: .4rem;
			box-sizing: border-box;
			text-align: justify;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 4;
			/*（行数）*/
			-webkit-box-orient: vertical;
		}

		.title-wrap {
			width: 7.1rem;
			/* height: 1.9rem; */
			margin: .2rem auto;
			padding: .3rem;
			box-sizing: border-box;
			background: url('__PUBLIC__/images/other/img_bj1.png') no-repeat center center;
			background-size: 100% 100%;
		}

		.title-wrap .row-wrap {
			display: flex;
			align-items: center;
			line-height: 0.45rem;
		}

		.title-wrap .row-wrap .num {
			width: .30rem;
			height: .30rem;
			flex: none;
			margin-right: 0.1rem;
			background-color: #e8ddba;
			border-radius: 50%;
			font-size: .28rem;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #cb9c4b;
			flex: none;
		}

		.title-wrap .row-wrap .tt {
			font-size: .26rem;
			color: #403a2c;
			font-weight: 600;
		}

		.ttt {
			width: 6.9rem;
			margin: .2rem auto;
			font-size: .28rem;
			color: #ffffff;
		}

		.ttt span {
			font-size: .34rem;
		}

		img.cs_btn {
			width: 5.88rem;
			/* height: 0.96rem; */
			display: block;
			margin: 3vh auto;
		}

		.share,
		.share-guide {
			position: fixed;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: rgba(0, 0, 0, .5);
			z-index: 1;
		}

		.share .ctt {
			width: 6rem;
			height: 6.2rem;
			background: url('__PUBLIC__/images/other/success-bg.png') no-repeat center center;
			background-repeat: no-repeat;
			background-origin: center center;
			background-size: 100% 100%;
			font-size: .48rem;
			color: #fdebc5;
			text-align: center;
			padding-top: .3rem;
		}

		.success {
			position: fixed;
			width: 100%;
			min-height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			z-index: 2;
			background: url('__PUBLIC__/images/other/img_xzbj.png') no-repeat center center;
			background-size: 100% 100%;
		}

		.success .tlt {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: .34rem;
			color: #ffffff;
			text-align: center;
		}

		.success .tlt .tt {
			font-size: .55rem;
			color: #ffffff;

		}

		.success .app-sc-wrap {
			width: 7.1rem;
			/* height: 6.72rem; */
			display: block;
			background-color: #fff;
			margin: .6rem auto .5rem;
			padding: 0.26rem;
			border-radius: .1rem;
			box-sizing: border-box;
		}

		.success .app-sc-wrap .ttt {
			font-size: .32rem;
			color: #333;
		}

		.success .app-sc-wrap .ttt span {
			color: #fe3434;
		}

		.success .app-sc-wrap img.app-sc {
			width: 6.58rem;
			height: 4.48rem;
			display: block;
			background-color: #ccc;
			margin: .6rem auto .5rem;
		}

		a.btn {
			width: 6.46rem;
			height: 1.14rem;
			display: block;
			margin: 0 auto;
			text-decoration: none;
		}

		a.btn img {
			display: block;
			width: 100%;
			height: 100%;
		}

		a.rt {
			font-size: .24rem;
			color: #ffffff;
			margin-top: 0.2rem;
		}

		.share-guide {
			z-index: 2;
			align-items: flex-start;
			background-color: rgba(0, 0, 0, .81);
		}

		.guide {
			width: 7.5rem;
			height: 6rem;

			background: url('__PUBLIC__/images/other/guide.png') no-repeat center center;
			background-size: 100% 100%;
			color: #fff;
			font-size: .34rem;
			padding: 3.7rem 3rem 2rem 2rem;
			box-sizing: border-box;
		}
		input.username#username,
		#datetime,
		input#phone,
		input#picker{
			-webkit-appearance:none;
			outline: 0;
			border:none;
			margin: 0;
			/* background-color: transparent; */
			border-radius: 0;
			padding-left: 0;
			text-align-last: left;
		}
		input::-webkit-input-placeholder{
			color: #757575;;
		}
	</style>
</head>

<body>
	<!-- 分享指引 点击分享按钮显示 -->
	<div class="share-guide">
		<div class="guide">点击这里分享内容到朋友圈</div>
	</div>
	<!-- 下载弹窗 -->
	<div class="success">
		<div class="tlt">
			<span class="tt">恭喜</span>
			<span class="ttt">您已经获得直播时候免费测算运势的机会。</span>
		</div>

		<div class="app-sc-wrap">
			<div class="ttt"></div>
			<img src="" alt="" class="app-sc">
		</div>
		<a href="" class="btn"><img src="__PUBLIC__/images/other/btn_xiazai.png" alt=""></a>
		<!-- <a href="" class="rt">返回大师直播首页</a> -->
	</div>

	<!-- 分享弹窗 -->
	<div class="share">
		<div class="ctt">林东</div>
	</div>
	<!-- 录入页 -->
	<main>
		<div class="banner">
			<img src="<!--{$arr['userimg']}-->" alt="" class="banner-dashi">
			<div class="dashi">
				<div class="name">
					<div class="name-tt">
						<!--{$arr['name']}-->
					</div>
					<div class="one-tt">
						<!--{$arr['nametip']}-->
					</div>
				</div>
				<div class="info">
					<!--{$arr['cotent']}-->
				</div>
			</div>
		</div>
		<div class="title-wrap">
			<div class="row-wrap">
				<div class="num">1</div>
				<div class="tt">直播主题：
					<!--{$arr['title']}-->
				</div>
			</div>
			<div class="row-wrap">
				<div class="num">2</div>
				<div class="tt">直播大师：
					<!--{$arr['name']}--> 老师</div>
			</div>
			<div class="row-wrap">
				<div class="num">3</div>
				<div class="tt">直播时间：
					<!--{$arr['starttime']}-->
				</div>
			</div>
		</div>
		<div class="ttt">直播时大师可为您<span>免费测算</span>！如有需要，请填写您的生日信息！</div>
		<section class="form-wrap-sec">
			<form id="_form" class="zm_form" action="<!--{:U('Bbqm/bbqm_zhifu','',false)}-->" method="post">
				<div class="zm_form_wrap">
					<ul>
						<li>
							
							<div class="li-tlt">您的姓名:</div>
							<input type="text" class="username" placeholder="请输入您的姓名" maxlength="2" id="username" name="username" />
							<div class="sex-wrap">
								<span class='sexslt' id="but_man" data-value="1">
									<i></i>
									<strong>男</strong>
								</span>
								<span class='sexslt' id="but_woman" data-value="0">
									<i></i>
									<strong>女</strong>
								</span>
								<input type="hidden" id="sex" name="gender" value="1" />
							</div>
						</li>
						<li>
							<div class="li-tlt">出生日期:</div>
							<div class="birth-wrap">
								<!-- data-date="1985-04-18-7"  -->
								<div type="text" class="Js_date" id="datetime" data-id="birthday">请选择您的生日</div>
								
								<input type="hidden" id="birthday" name="birthday" value="">
							</div>
							<img class='rili' src="__PUBLIC__/images/other/img_rili.png" alt="">
						</li>
						<li>
							<div class="li-tlt">出生地点:</div>
							<div class="locat-wrap">
									
								<input name='addr' type="text" id="picker" readonly="readonly" placeholder="请选择您的出生地点">
							</div>
							<img class='locat' src="__PUBLIC__/images/other/img_dingwei.png" alt="">
						</li>
						<li>
							<div class="li-tlt">联系电话:</div>
							<input type="number" class="bg_no" placeholder="请输入您的手机，以便我们短信通知您" id="phone" name="phone" />
						</li>
					</ul>
				</div>
			</form>
		</section>
		<img src="__PUBLIC__/images/other/btn_yuyue.png" alt="" class="cs_btn">
	</main>

	<script src="__PUBLIC__/js/location/picker.min.js"></script>
	<script type="text/javascript" src="__PUBLIC__/js/location/city.js"></script>
	<script type="text/javascript" src="__PUBLIC__/js/location/index.js"></script>
	<script>
		var wxlogin = '<!--{$Think.cookie.wxlogin}-->';
		var channel = '<!--{$Think.cookie.channel}-->';

		// 场景切换
		// 1 正常填写资料
		// 2 显示分享弹窗 $('.share')[0]
		// 3 显示分享引导 $('.share-guide')
		// 4 显示下载页 $('.success')[0]
		showPage(1)

		function showPage(ctrl,data) {
			ctrl = +ctrl
			$('.share').hide()
			$('.success').hide()
			$('.share-guide').hide()
			switch (ctrl) {
				case 1:
					break;
				case 2:
					$('.share').show()
					$('.share .ctt')[0].innerHTML = data
					break;
				case 3:
					$('.share-guide').show()
					break;
				case 4:
					$('.success').show()
					fillDownloadPage(data.title.split('#')[0],data.title.split('#')[1],data.content,data.img,data.url)
					break;
			}
		}

		// 查看预约
		$.getJSON("<!--{:U('Other/selectYy','',false)}-->", {}, function (data) {
			console.log('非首次进来')
			console.log(data)
			if (data.code == 1) {
				if (data.content.isshare == 1) {
					showPage(4,data.content)
				} else {
					showPage(2)
				}
			}
		});

		// 三个场景 填写资料 分享弹窗 下载弹窗
		// 未提交过资料 =》 填写资料
		// 提交过未分享 =》分享弹窗
		// 提交过已分享 =》下载弹窗


		// 首页banner背景图
		$('.banner')[0].style.backgroundImage = "<!--{$arr['banner']}-->";

		function fillDownloadPage(title,smartTitle,imgTitle,src,url){
			$('.success .tlt .tt')[0].innerHTML = title
			$('.success .tlt .ttt')[0].innerHTML = smartTitle
			$('.app-sc-wrap .ttt')[0].innerHTML = imgTitle
			$('.app-sc-wrap img.app-sc')[0].src = src
			$('.success .btn')[0].href = url
		}
		

		wx.config({
			debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			appId: '<!--{$appid}-->', // 必填，公众号的唯一标识
			timestamp: '<!--{$timestamp}-->', // 必填，生成签名的时间戳
			nonceStr: '<!--{$noncestr}-->', // 必填，生成签名的随机串
			signature: '<!--{$signature}-->', // 必填，签名，见附录1
			jsApiList: [
				'checkJsApi',
				'openLocation',
				'getLocation',
				'onMenuShareTimeline',
				'onMenuShareAppMessage',
				'scanQRCode'
			] // 必填，需要使用的JS接口列表，所有JS接 口列表见附录2
		});

		wx.ready(function () {
			wx.onMenuShareTimeline({
				title: "我在知命APP预约了<!--{$arr['name']}--> 老师的免费运势测算，机不可失，快来一起参与。",
                link: "https://hy.yixueqm.com/zhiming/index.php/Home-Other-broadcastIndex?lid=<!--{$Think.cookie.lid}-->",
				imgUrl: 'http://api.xbd61.com/hebazi/public/img/icon.png', 
				type: '', // 分享类型,music、video或link，不填默认为link
				dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
				success: function (res) {
					// 查看预约
					$.getJSON("<!--{:U('Other/selectYy','',false)}-->", {}, function (data) {
						if (data.code == 1) {
							if (data.content.isshare != 1) {
								$.getJSON("<!--{:U('Other/shareYy','',false)}-->", {}, function () {
									showPage(4,data.content)
								})
							}
						}
					});
				}
			});
            wx.onMenuShareAppMessage({
                title: "我在知命APP预约了<!--{$arr['name']}--> 老师的免费运势测算，机不可失，快来一起参与。",
                link: "https://hy.yixueqm.com/zhiming/index.php/Home-Other-broadcastIndex?lid=<!--{$Think.cookie.lid}-->",
                imgUrl: 'http://api.xbd61.com/hebazi/public/img/icon.png',
                type: '', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function (res) {
                    // 查看预约
                    $.getJSON("<!--{:U('Other/selectYy','',false)}-->", {}, function (data) {
                        if (data.code == 1) {
                            if (data.content.isshare != 1) {
                                $.getJSON("<!--{:U('Other/shareYy','',false)}-->", {}, function () {
                                    showPage(4,data.content)
                                })
                            }
                        }
                    });
                }
            });

		});
		// }

		// 点击分享按钮
		$('.share').on('click', function () {
			showPage(3)
		})

		$(".cs_btn").on('click', function () {
			if ($("[name='username']").val() == "") {
				layer.msg("请输入您的姓名");
				return false;
			}
			var patrn = /[\u4E00-\u9FA5]/;
			if (!patrn.exec($("[name='username']").val())) {
				layer.msg("请输入您的姓名");
				return false;
			}

			if ($("[name='birthday']").val() == "") {
				layer.msg("请选择您的生日");
				return false;
			}
			if ($("[name='addr']").val() == "") {
				layer.msg("请选择您的出生地点");
				return false;
			}
			if (!/^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/.exec($("[name='phone']").val())) {
				layer.msg("请输入手机号");
				return false;
			}
			console.log({
				phone: $("[name='phone']").val(),
				addr: $("[name='addr']").val(),
				birthday: $("[name='birthday']").val(),
				sex: $("[name='gender']").val(),
				username: $("[name='username']").val()
			})
			var oli = layer.load();
			$.getJSON("<!--{:U('Other/submitted','',false)}-->", {
				phone: $("[name='phone']").val(),
				addr: $("[name='addr']").val(),
				birthday: $("[name='birthday']").val(),
				sex: $("[name='gender']").val(),
				username: $("[name='username']").val()
			}, function (data) {
				layer.closeAll('loading');
				layer.msg('订单提交成功', {
					icon: 1
				});
				setTimeout(function () {
					showPage(2,$("[name='username']").val())
				}, 1300);
			});
		});

		// 时间
		var calendar1 = new lCalendar().init('#datetime'); //男
		// 选择按钮
		var obut_man = document.getElementById('but_man');
		var obut_woman = document.getElementById('but_woman');
		var osex = document.getElementById('sex');
		osex.value = 1;
		obut_man.classList.add("on");
		obut_man.onclick = function () {
			obut_man.classList.add("on");
			osex.value = 1;
			obut_woman.classList.remove('on');
		}
		obut_woman.onclick = function () {
			obut_woman.classList.add("on");
			osex.value = 0;
			obut_man.classList.remove('on');
		};
		document.body.addEventListener("focusout", function () {
			window.scrollTo(0, 0);
		})
	</script>
	<script src="//cdn.jsdelivr.net/npm/eruda"></script>
	<script>
		eruda.init()
	</script>
</body>

</html>